<template>
  <view class="task-management">
    <NavBar
      v-if="appInfoStore().isH5"
      title="任务管理"
      :backgroundColor="'#fff'"
    />
    <view
      class="task-management-content"
      :class="{ 'padding-top-navbar': appInfoStore().isH5 }"
    >
      <view class="task-management-date">
        <view class="management-date-day">
          <text>{{ nowDay }}</text>
        </view>
        <view class="management-date-text">
          <text>{{ dateTime }}</text>
        </view>
      </view>
      <view class="statistical-overview">
        <view class="statistical-overview-box">
          <view class="title-box">
            <view class="title-left">
              <text>统计概况</text>
              <text>更新于凌晨0点</text>
            </view>
            <view class="title-right">
              <view class="title-right-search">
                <i
                  class="iconfont icon-sousuo"
                  style="font-size: 16px"
                ></i>
                <text>搜索</text>
              </view>
              <view
                class="title-right-icon"
                @click="goKanbanSettings()"
              >
                <!-- <i class="iconfont icon-lingdang"></i> -->
                <!-- <text class="xiaodian"></text> -->
                <i class="iconfont icon-shezhi"></i>
              </view>
            </view>
          </view>
          <view class="statistical-overview-content">
            <view
              class="statistical-overview-nums"
              @click="goTaskList('all')"
            >
              <view class="overview-item overview-item-total align-center">
                <view class="overview-item-num">
                  <text>{{ taskCountsData?.urgentTaskCount ?? 0 }}</text>
                  <text>/{{ taskCountsData?.total ?? 0 }}</text>
                </view>
                <view class="overview-item-text">
                  <text>任务总数</text>
                </view>
              </view>
              <view class="overview-item overview-item-completed align-center">
                <view class="overview-item-num">
                  <text>{{ taskCountsData?.completedTaskCount ?? 0 }}</text>
                </view>
                <view class="overview-item-text">
                  <text>已完成</text>
                </view>
              </view>
              <view class="overview-item overview-item-emergency align-center">
                <view class="overview-item-num">
                  <text>{{ taskCountsData?.urgentTaskCount ?? 0 }}</text>
                </view>
                <view class="overview-item-text">
                  <text>紧急任务</text>
                </view>
              </view>
              <view class="overview-item overview-item-progress align-center">
                <view class="overview-item-num">
                  <text>{{ taskCountsData?.ongoingTaskCount ?? 0 }}</text>
                </view>
                <view class="overview-item-text">
                  <text>进行中</text>
                </view>
              </view>
            </view>
            <view class="task-swiper">
              <task-swiper :taskCountsData="taskCountsData" />
            </view>
          </view>
        </view>
      </view>
      <view class="my-task">
        <my-task />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import taskSwiper from "./taskSwiper/index.vue";
import NavBar from "@/components/navBar/index.vue";
import myTask from "./myTask/index.vue";
import { appInfoStore } from "@/stores/appInfo";
import { getTaskReceiveCount, getTaskCreatorsTaskList } from "@/api/index";
import Taro, { navigateTo, useDidShow } from "@tarojs/taro";

const state = reactive({
  showIcon: "",
  pageNum: 1,
  pageSize: 10,
});
const dateTime = ref("");
const nowDay = ref("");
const taskCountsData = ref(undefined);
onMounted(async () => {
  await handleTaskReceiveCount();
  // handleGetTaskCreatorsTaskList();
  formatDate();
});
useDidShow(() => {
  handleTaskReceiveCount();
  // handleGetTaskCreatorsTaskList();
});
const goKanbanSettings = () => {
  navigateTo({
    url: "/packageA/pages/kanbanSettings/index",
  });
};
const goTaskList = (type: string) => {
  Taro.navigateTo({
    url: `/packageB/pages/taskDashboard/index`,
  });
};
const handleTaskReceiveCount = async () => {
  taskCountsData.value = undefined;
  getTaskReceiveCount().then(res => {
    taskCountsData.value = res.data;
  });
};
// const handleGetTaskCreatorsTaskList = async () => {
//   let params = {
//     userId: Taro.getStorageSync("user").userId,
//     pageNum: state.pageNum,
//     pageSize: state.pageSize,
//   };
//   getTaskCreatorsTaskList(params).then(res => {
//     console.log(res);
//   });
// };

const formatDate = () => {
  const date = new Date();
  const weekdays = ["日", "一", "二", "三", "四", "五", "六"];

  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const weekday = weekdays[date.getDay()];
  dateTime.value = `${year}年${month}月${day}日（周${weekday}）`;
  nowDay.value = day;
  console.log(dateTime.value, "dateTime");
};
</script>

<style lang="less">
@import "./index.less";
// @import url("../../../assets/css/index.css");
@import "@/assets/css/index.less";
</style>
